<template>
	<div class="application">
		<maining :tablist="tablist" :showi="showi" @ontab="ontab" title="应用案例">
			<template v-slot:title >
				<div v-show="!showdel" class="is-wb is-tc is-m-b3" style="padding: 45px 15px 0 15px;">
					<div style="margin-bottom: 10px;" :style="{'font-size':showMobile?'18px':'30px'}">
						{{applicationList[showi]?.title}}
					</div>
					<!-- <div class="is-f-12" style="color: #969696;">
						<span>类别：应用案例 <span class="is-m-l1">日期：{{applicationList[showi]?.update_time}} </span> <span
								class="is-m-l2">我要分享</span></span>
					</div> -->
				
				</div>
			</template>
			<template v-slot:main>
				<div v-show="showdel" class="" style="padding: 20px 30px;">
					<div class="flex-r flex-w flex-sp">
						<div class="is-cur" style="width: 250px;min-height: 223px;" v-for="(item,index) in applicationList" :key="index" @click="onpath(index,item)">
							<div class="card is-wb" style="height: 187px;overflow: hidden;">
								<img class="is-img" :src="item.image" alt="">
							</div>
							<div class="is-tc is-f-14" style="padding: 20px 0;">
								{{item.title}}
							</div>
						</div>
						
					</div>
				</div>
				<div v-show="!showdel" style="padding: 30px 30px;">
					<div  v-html="applicationList[showi]?.content"></div>
				</div>
				
			</template>
		</maining>
	</div>
</template>

<script lang="ts" setup>
	import maining from '@/components/main.vue'
	import { storeToRefs } from 'pinia'
	import useAppStore from '@/store/modules/home'
	import { service } from '@/request/http'
	import { isMobile } from '@/utils/index'
	const {
		applicationList
	} = defineProps({
		applicationList: { // 应用
			type: Array,
			default: () => {
				return []
			}
		},
		
	})

	const store = storeToRefs(useAppStore())
	const showdel =store.showdel
	// const applicationindex = store.applicationindex
	const onpath = (i : any,val:any) => {
		useAppStore().onshowdel(false)
		useAppStore().onapplicationindex(i)
		showi.value = i
	}
	const tablist = ref([])
	const showi = store.showi
	const ontab = (i : any) => {
		showi.value = i
	}
	const showMobile = ref(null)
	onMounted(() => {
		showMobile.value = isMobile() //true 移动端 false pc
	})
</script>

<style lang="scss" scoped>
	.application {
		.card {

			transition: 400ms;

			&:hover {
				transform: scale(1.05, 1.05);
			}
		}
	}
</style>